<template>
  <div style="height: 100%;">
    <yd-ls-nav-bar
      :title="title"
      :lfurl="tolfurl"
      :rgurl="torgurl"
      :rgtxt="torgtxt"
      :rgicon="torgicon"
      v-if="onhead"
      @handle-txt="handleRgtxtButton"
      @handle-rgicon="handleRgiconButton"></yd-ls-nav-bar>
    <div class="g-layout">

      <section class="g-layoutview">

        <slot></slot>

      </section>
    </div>
    <yd-ls-tab-bar v-if="onfoot"></yd-ls-tab-bar>
  </div>
</template>

<style>
  .g-layout {
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    max-width: 750px;
    min-width: 300px;
  }
  .g-layoutview {
    width: 100%;
    height: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .g-layoutview:after {
    content: '';
    width: 100%;
    display: block;
  }
</style>
<script>
  import ydLsNavBar from './yd-ls-nav-bar.vue'
  import ydLsTabBar from './yd-ls-tab-bar.vue'
  export default {
      name: 'ydlsyayout',
      props: {
        tolfurl: String,
        torgurl: String,
        torgtxt: String,
        torgicon: String,
        title: String,
        onfoot: {
          type: Boolean,
          default: true
        },
        onhead: {
          type: Boolean,
          default: true
        }
      },
      methods: {
        handleRgtxtButton () {
          this.$emit('handle-rgtxt-button')
        },
        handleRgiconButton () {
          this.$emit('handle-rgicon-button')
        }
      },
      mounted() {
      },
      components: { ydLsNavBar, ydLsTabBar }


  }
</script>
